import React, { Component } from 'react'
import { SideBar } from 'antd-mobile'
import mz from '../../assets/img/mz.png';
import vip from '../../assets/img/vip.png';
import add from '../../assets/img/add.png';
import axios from 'axios'
import './index.css'
export default class Category extends Component {
    constructor() {
        super();
        this.state = {
            tabsList: [],//左侧菜单列表数据
            cateList: [],//右侧数据
            activeKey: "312",
            sortType: 0,
            sortBg: 'https://srv.hotkidceo.com/store/static/type/price-def.png'
        }
    }

    componentDidMount() {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/categoryList', { "isWholeSale": 0, "channelId": null }
        ).then(res => {
            console.log(res);
            this.setState({ tabsList: res.data.data.categoryInfo })
        })

        //获取右侧数据
        this.getCateData();

    }

    getCateData = () => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/commoditiesByCategory', { "ceoStatus": 0, "catKey": this.state.activeKey, "page": 1, "pageSize": 1000, "channelId": null, "memberKey": "" }
        ).then(res => {
            this.setState({ cateList: res.data.data.commodityInfo })
        })
    }

    setActiveKey = (value) => {
        console.log("左侧菜单点击了", value);
        //将 value的值赋值给 state
        this.setState({
            activeKey: value
        }, () => { this.getCateData(); })

    }
    switchType = () => {
        if (this.state.sortType === 0) {
            this.setState({
                sortType: 1,
                sortBg: 'https://srv.hotkidceo.com/store/static/type/price-t.png',
                cateList: this.state.cateList.sort((a, b) => {
                    return a.template.origPrice - b.template.origPrice;
                })
            })

            return;
        }
        else if (this.state.sortType > 0) {
            this.setState({
                sortType: -1,
                sortBg: 'https://srv.hotkidceo.com/store/static/type/price-b.png',
                cateList: this.state.cateList.sort((a, b) => {
                    return b.template.origPrice - a.template.origPrice;
                })
            })
            return;
        }
        else {
            this.setState({
                sortType: 0,
                sortBg: 'https://srv.hotkidceo.com/store/static/type/price-def.png'
            })
            return;
        }
    }
    render() {
        //
        let { tabsList, activeKey, cateList, sortType, sortBg } = this.state;
        return (
            <div className="cate_con">
                <div className='cate_left'>
                    <SideBar activeKey={activeKey} onChange={this.setActiveKey}>
                        {tabsList.map(item => (
                            <SideBar.Item key={item.code} title={item.displayName} />
                        ))}
                    </SideBar>
                </div>
                <div className='cate_right'>
                    <div className='price'>
                        <span className='defColor' onClick={this.switchType} style={{ color: sortType !== 0 ? '#f73651' : '' }}>价格</span>
                        <div className='arrow' style={{ backgroundImage: `url("${sortBg}")` }}></div>
                    </div>
                    <ul>
                        {
                            cateList.map((item, i) => <li key={item.key}>
                                <div className='image'><div className='img'><img src={item.template.listImages} alt=""></img></div></div>
                                <div className='goods-info'>
                                    <div className='title'>{item.name}</div>
                                    <div className='guige'>{item.template.displayName}</div>
                                    <div className='tip'><img src={mz} alt=""></img></div>
                                    <div className='money'>
                                        <div className='left'>
                                            <span>￥</span>
                                            <span className='origPrice'>{item.template.origPrice}</span>&nbsp;
                                            <span>￥</span>
                                            <span className='vipPrice'>{item.template.supplyPrice}</span>
                                            <div className='vip'><img src={vip} alt=""></img></div>
                                        </div>
                                        <div className='right'><img src={add} alt=""></img></div>
                                    </div>
                                </div></li>)
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
